<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-04-14 10:41:45
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div class="components">
    <div class="left">
      <el-card>
        <template #header>
          <div class="el-card-header">普通消息提示</div>
          <div class="el-card-header-tip">
            进行了二次封装，使得消息提示可以自行控制<br /><br />
            接收三个参数<code>{ message: 消息文字 , number: 页面显示的条数 , options: 其他的element的参数 }</code>
          </div>
        </template>
        <CcButton @click="showMessageFun('仅会显示一个')">仅会显示一个</CcButton>
        <CcButton @click="showMessageFun('显示任意条数2', 2)">显示任意条数：2条</CcButton>
        <CcButton @click="showMessageFun('显示任意条数3', 3)">显示任意条数：3条</CcButton>
        <CcButton @click="showMessageFun('显示任意条数4', 4)">显示任意条数：4条</CcButton>
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card>
        <template #header>
          <div class="el-card-header">简化写法</div>
          <div class="el-card-header-tip">简化写法仅会出现一条</div>
        </template>
        <CcButton @click="showMessageBaseFun('简化写法')">简化写法</CcButton>
        <Code><div v-html="code.code1"></div></Code>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { ccMessage } from '@/components/packages/cc-message';
import code from './code';
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const showMessageFun = (str: string, number: number = 1): void => {
      ccMessage.success({ message: str, number });
    };
    const showMessageBaseFun = (str: string): void => {
      ccMessage.success(str);
    };
    const state = reactive({
      code
    });
    return { ...toRefs(state), showMessageFun, showMessageBaseFun };
  }
};
</script>

<style scoped lang="scss"></style>
